<template>
  <div>demo/MyComp/index
    <Child1 ref="xxx"  :msg="pmsg" :num="123" ></Child1>
    <button @click="callChildFunction">按钮</button>
    <hr>
    <input v-model="mm"  >{{'mm:' +  mm }} <br>
    <input v-bind:value="mm"  @input=" mm=$event.target.value "  >{{'mm:' +  mm }}
    <hr>
<!--    <Child2 :val="pval"  @changeValue="cv" ></Child2> {{'pval:' + pval }} <br>-->
    <Child2 v-model="pval" ></Child2> {{'pval:' + pval }}
    <hr>
    <Child3 v-model="taVal"  :pval="radioList"  ></Child3>{{taVal}}
    <hr>
    <Child4  :pval="radioList"  v-model="checkVal"  ></Child4>{{checkVal}}
  </div>
</template>
<script>

import Child1 from "./Child1.vue"
import Child2 from "./Child2.vue"
import Child3 from "./Child3.vue"
import Child4 from "./Child4.vue"
export default {
  name: "index",
  components:{
    Child1, Child2, Child3, Child4
  },
  data(){
    return{
      checkVal: [0,2],
      radioList :[
        {
          value:0,
          label:'运动'
        },
        {
          value:1,
          label:'电影'
        },
        {
          value:2,
          label:'打电话'
        }
      ],
      pmsg:"父组件信息",
      mm:"model测试",
      pval:"父信息",
      taVal: 1 ,

    }
  },
  created(){
    // console.log("created:",this.$refs.xxx);
    // this.$refs.xxx.changValue()
  },
  mounted() {
    // console.log("mounted:",this.$refs.xxx);
    // this.$refs.xxx.changValue()
  },
  methods:{
    callChildFunction(){
      this.$refs.xxx.changValue()
    },
    // cv(val){
    //   console.log("父函数被调用")
    //   this.pval = val
    // }
  }
}
</script>



<style scoped lang="scss">

</style>
